 <#include "../include/header.html">
<body>
<script src="${base.contextPath}/common/code?requestStatusdata=SYS.IF.REQUEST_STATUS" type="text/javascript"></script>
<script type="text/javascript">

    var today = new Date();
    today.setHours(0);
    today.setMinutes(0);
    today.setSeconds(0);
    today.setMilliseconds(0);
    var viewModel = Hap.createGridViewModel("#grid",{
        requestStatusdata:requestStatusdata
    });
    viewModel.model.set("startDate",today);
</script>
<div id="dialogInvokeRecordDetails" ></div>
<div id="page-content">
    <div class="panel" id="query-form" style="padding: 0px;border:none;box-shadow: none;">
        <form class="form-horizontal" id="myForm">
            <div class="panel-body">
                <div class="row">
                    <div class="col-xs-4">
                        <div class="form-group">
                            <label class="col-xs-4 control-label"><@spring.message "api.application.code"/></label>
                            <div class="col-xs-8">
                                <input type="text" style="width: 100%" data-bind="value:model.applicationCode"
                                       class="k-textbox">
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-4">
                        <div class="form-group">
                            <label class="col-xs-4 control-label"><@spring.message
                                "hapinterfaceheader.clientid"/></label>
                            <div class="col-xs-8">
                                <input type="text" style="width: 100%" data-bind="value:model.clientId"
                                       class="k-textbox">
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-4">
                        <div class="form-group">
                            <label class="col-xs-4 control-label"><@spring.message "api.invokerecord.invokeid"/></label>
                            <div class="col-xs-8">
                                <input type="text" style="width: 100%" data-bind="value:model.invokeId"
                                       class="k-textbox">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row ">
                    <div class="col-xs-4">
                        <div class="form-group">
                            <label class="col-xs-4 control-label"><@spring.message"server.code"/></label>
                            <div class="col-xs-8">
                                <input type="text" style="width: 100%"
                                       data-bind="value:model.serverCode" class="k-textbox">
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-4">
                        <div class="form-group">
                            <label class="col-xs-4 control-label"><@spring.message
                                "interface.invoke.requeststatus"/></label>
                            <div class="col-xs-8">
                                <select data-role="combobox" data-value-primitive="true"
                                        data-text-field="meaning" data-value-field="value"
                                        data-bind="source: requestStatusdata,value:model.responseStatus"
                                        style="width: 100%;"></select>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-4">
                        <div class="form-group">
                            <label class="col-xs-4 control-label"><@spring.message
                                "interface.invoke.statsenddate"/></label>
                            <div class="col-xs-8">
                                <input style="width: 100%" data-role="datetimepicker" data-bind="value:model.startDate"
                                       class="k-datetimepicker">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row ">
                    <div class="col-xs-4"></div>
                    <div class="col-xs-4"></div>
                    <div class="col-xs-4">
                                    <span class="btn btn-default pull-right" type="button" data-bind="click:reset"><i
                                            class="fa fa-eraser" style="margin-right: 3px;"></i><@spring.message "hap.reset"/></span>
                        <span class="btn btn-primary pull-right" data-bind="click:query"
                              type="submit" style="margin-right: 3px;"><i class="fa fa-search"></i><@spring.message "hap.query"/></span>
                    </div>
                </div>

            </div>
        </form>
    </div>
    <script>kendo.bind($('#query-form'), viewModel);</script>
    <div style="clear: both;">
        <div id="grid"></div>
    </div>
</div>

<script type="text/javascript">
    Hap.initEnterQuery('#query-form', viewModel.query);
    var BaseUrl = _basePath;
    dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: BaseUrl + "/sys/logs/invokeRecord/query",
                type: "POST",
                contentType: "application/json",
                dataType: "json"
            },
            parameterMap: function (options, type) {
                if (type === "read") {
                    return kendo.stringify(Hap.prepareQueryParameter(viewModel.model.toJSON(), options));
                }
            }
        },
        batch: true,
        serverPaging: true,
        pageSize: 50,
        schema: {
            data: 'rows',
            total: 'total',
            model: {
                id: "recordId",
                fields: {}
            }
        }
    });

    $("#grid").kendoGrid({
        dataSource: dataSource,
        resizable: true,
        scrollable: true,
        navigatable: false,
        autoResize:false,
        dataBound: function () {
            if (parent.autoResizeIframe) {
                parent.autoResizeIframe('${RequestParameters.functionCode!}')
            }
        },
        pageable: {
            pageSizes: [5, 10, 20, 50],
            refresh: true,
            buttonCount: 5
        },
        columns: [
            /* 应用代码 */
            {
                field: "applicationCode",
                title: '<@spring.message "api.application.code"/>',
                width: 80
            },
            /* 服务代码 */
            {
                field: "serverCode",
                title: '<@spring.message "server.code"/>',
                width: 100
            },
            /* clientId */
            {
                field: "clientId",
                title: '<@spring.message "hapinterfaceheader.clientid"/>',
                width: 180
            },
            /* invokeId */
            {
                field: "invokeId",
                title: '<@spring.message "api.invokerecord.invokeid"/>',
                width: 180
            },

            /* 请求时间 */
            {
                field: "requestTime",
                title: '<@spring.message "hapinterfaceoutbound.requesttime"/>',
                width: 80,
                headerAttributes: {
                    style  : "text-align: center"
                },
                attributes: {
                    style: "text-align: center;"
                },
            },
            /* 请求状态 */
            {
                field: "responseStatus",
                title: '<@spring.message "hapinterfaceinbound.requeststatus"/>',
                width: 60,
                headerAttributes: {
                    style  : "text-align: center"
                },
                attributes: {
                    style: "text-align: center;"
                },
                template: function (dataItem) {
                    var v = dataItem.responseStatus;
                    var styl = '';
                    $.each(requestStatusdata,function(i,n){
                        if((n.value||'').toLowerCase() == (v||'').toLowerCase()){
                            v = n.meaning;
                            if(n.value == 'success'){
                                styl = '<span style="color:#00AA00 ">'+v+'</span>';
                                return styl;
                            }
                            else {
                                styl=  '<span style="color:#DD0000 ">'+v+'</span>' ;
                                return styl;
                            }
                        }
                    })
                    return styl;
                }
            },

            /* 操作 */
            {
                title: '<@spring.message "hap.action"/>',
                width: 60,
                headerAttributes: {
                    style  : "text-align: center"
                },
                attributes: {
                    "class": "table-cell",
                    style: "text-align: center; font-size: 14px"
                },
                template: function (rowdata) {
                    if (!!rowdata.recordId) {
                        return Hap.createAnchor('<@spring.message "hap.details"/>', invokeRecordDetails, rowdata.recordId );
                    }
                    return '';
                }
            }
        ],
    });

    function invokeRecordDetails( recordId ) {
        var url = 'api_invoke_record_details.html';
        if(recordId){
            url = url + "?recordId="+recordId;
        }
        var invokeRecordDetailsWin = Hap.createWindow('#dialogInvokeRecordDetails', {
            width: '80%',
            height: 620,
            title: '<@spring.message "hap.details"/>',
            url: url
        })
        if (parent.autoResizeIframe) {
            parent.autoResizeIframe('${RequestParameters.functionCode!}', 700, function () {
                invokeRecordDetailsWin.center().open();
            })
        } else {
            invokeRecordDetailsWin.center().open();
        }
    }

</script>

</body>
</html>
